<template>
	<div class="card-1">
		<div class="title">客户列表</div>
		<div class="info">
			<div class="info-item">
				<label>姓名：</label>
				<span>{{ userInfo.user_name }}</span>
			</div>
			<div class="info-item">
				<label>年龄：</label>
				<span>{{ nianling }}</span>
			</div>
			<div class="info-item">
				<label>电话：</label>
				<span>{{ userInfo.phone }}</span>
			</div>
			<div class="info-item">
				<label>身高：</label>
				<span>{{ userInfo.height }} cm</span>
			</div>
			<div class="info-item">
				<label>性别：</label>
				<span>{{ genderMap[Number(userInfo.gender)] }}</span>
			</div>
			<div class="info-item">
				<label>体重：</label>
				<span>{{ userInfo.weight }} kg</span>
			</div>
			<div class="info-item">
				<label>鞋码：</label>
				<span>{{ userInfo.shoe_size }}</span>
			</div>
			<div class="info-item">
				<label>出生日期：</label>
				<span>{{ userInfo.birthday }}</span>
			</div>
			<div class="info-item">
				<label>操作人：</label>
				<span>{{ info.op_user_info.user_name }}</span>
			</div>
			<div class="info-item">
				<label>操作日期：</label>
				<span>{{ getNowFormatDate() }}</span>
			</div>
		</div>
		<div class="title">客户主诉</div>

		<div class="chechbox-list">
			<el-checkbox-group v-model="form.user_requirement" @change="checkBoxChange">
				<el-checkbox v-for="(item, i) in checkboxList" :key="i" :label="item.id" border>{{ item.value }}</el-checkbox>
			</el-checkbox-group>
		</div>
		<el-input type="textarea" v-model="form.user_requirement_remark" @change="inputChange" :rows="3" placeholder="请详细描述客户主诉的具体情况.."></el-input>
	</div>
</template>

<script>
function debounce(fn, delay) {
	let timer;
	return function (...args) {
		// 每次事件触发时，清除上一次的定时器
		clearTimeout(timer);
		// 设置新的定时器
		timer = setTimeout(() => {
			fn.apply(this, args); // 使用 `apply` 使得 `this` 和参数正确
		}, delay);
	};
}
import { getNowFormatDate, calculateAge } from '@/utils/dateUtil.js';
export default {
	props: {
		info: {
			type: Object,
			default: () => {
				return { op_user_info: {} };
			}
		},
		userInfo: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	name: 'fileName',
	components: {},
	data() {
		return {
			getNowFormatDate,
			textarea: '',
			form: { user_requirement: [], user_requirement_remark: '' },
			checkboxList: []
		};
	},
	computed: {
		nianling() {
			return calculateAge(this.userInfo.birthday);
		}
	},
	created() {},
	mounted() {
		this.init();
	},
	methods: {
		inputChange() {
			this.update();
		},
		checkBoxChange() {
			this.update();
		},
		update: debounce(function () {
			let user_requirement = this.form.user_requirement.join(',');
			this.$api(
				'check/check_detail/record',
				{
					check_id: this.$route.query.check_id,
					user_id: this.$route.query.user_id,
					...this.form,
					user_requirement
				},
				'post'
			).then((res) => {
				if (res.code == 200) {
					this.$parent.getCheckDetail();
				}
			});
		}, 500),
		customUpdate(fun) {
			let user_requirement = this.form.user_requirement.join(',');
			this.$api(
				'check/check_detail/record',
				{
					check_id: this.$route.query.check_id,
					user_id: this.$route.query.user_id,
					...this.form,
					user_requirement
				},
				'post'
			).then((res) => {
				fun && fun();
				if (res.code == 200) {
					this.$parent.getCheckDetail();
				}
			});
		},
		init() {
			this.$api('check/config/check_kv', { keys: ['user_requirement'] }, 'post').then((res) => {
				if (res.code == 200) {
					this.checkboxList = res.data?.data?.user_requirement || [];
				}
			});
		}
	}
};
</script>

<style scoped lang="less">
.card-1 {
	flex-shrink: 0;
	width: 481px;
	height: 562px;
	padding: 25px;
	background: #ffffff;
	border-radius: 10px;
	.title {
		padding-bottom: 20px;
		font-weight: bold;
		font-size: 18px;
		color: #333333;
		line-height: 25px;
		text-align: left;
		font-style: normal;
	}
	.info {
		display: flex;
		flex-wrap: wrap;
		padding: 10px 0;
		border-bottom: 1px solid #ececec;
		margin-bottom: 20px;
		.info-item {
			display: flex;
			width: 50%;
			font-weight: 500;
			font-size: 14px;
			color: #333333;
			line-height: 20px;
			text-align: left;
			font-style: normal;
			margin-bottom: 10px;
			label {
				display: inline-block;
				width: 75px;
			}
			span {
				white-space: nowrap;
			}
		}
	}
	.chechbox-list {
		// height: 100px;
		padding-bottom: 10px;
		/deep/.el-checkbox-group {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			.el-checkbox {
				margin: 0;
			}
		}
	}
	.section-title {
		.lbox {
		}
	}
	.cell {
		height: 72px;
		background: #ffffff;
		border-radius: 10px;
	}
}
</style>
